<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>乐购商城-首页</title>
    <!-- 初始化 -->
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 公共css -->
    <link rel="stylesheet" href="./css/common.css">
    <!-- 引入轮播css 在自己写的前面 -->
    <link rel="stylesheet" href="./lib/slider/slider.css">
    <!-- 引入写的首页css -->
    <link rel="stylesheet" href="./css/index.css">

    


    <!-- 引入jquery -->
    <script src="./js/jquery.js"></script>
    <!-- 引入轮播js 在引入jquery之后  在自己写的前面 -->
    <script src="./lib/slider/slider.js"></script>
    <!-- 引入公共js -->
    <script src="./js/common.js"></script>
    <!-- 引入自己写的首页js -->
    <script src="./js/index.js"></script>
    <script src="./lib/slider/slider.js"></script>
    
</head>

<body>
    <!-- 头部 -->
    <div id="header">
        <!-- 版心 -->
        <div class="wrap clearfix headerBox">
            <!-- 头部logo -->
            <div class="headerLogo fl"></div>
            <!-- 左侧legou.cn -->
            <div class="headerText fl">legochina.cn</div>
            <!-- 右侧登录 -->
            <div class="headerLogin fr">
                <!-- span贴紧不能换行，不然字间距变大了 -->
                <span>欢迎光临</span>
                <span class="link-homepage ">乐购</span>
                <span>,请</span>
                <span class="link-login">登录/</span>
                <span class="link-regist ">注册</span>
            </div>
        </div>
    </div>
    <!-- 主体部分 -->
    <div id="mian">
        <!-- 大版心 -->
        <div class="wrap">
            <!-- 搜索栏 -->
            <div class="searchbox">
                <!-- 版心 -->
                <div class="wrap clearfix">
                    <!-- 购物车，我的订单 向右浮动所以靠右的内容放前面 -->
                    <div class="shopping-order fr clearfix">
                        <!-- 购物车 -->
                        <div class="shopping fl">
                            <!-- 购物车图标 -->
                            <span class="shopping-icon"></span>
                            <span>购物车</span>
                            <span>3</span>
                        </div>
                        <!-- 我的订单 -->
                        <div class="order fl">我的订单</div>
                    </div>
                    <!-- 搜索输入栏 -->
                    <div class="search fr">
                        <!-- 输入框 -->
                        <div class="s-ipt">
                            <input type="text" placeholder="创意文具" id="oldInp">
                        </div>
                        <!-- 搜索按钮 -->
                        <div class="s-btn"></div>
                    </div>

                </div>
            </div>
            <!-- 头部品类导航 -->
            <div class="top-nav">
                <ul>
                    <li class="nav-list fl">图书</li>
                    <li class="nav-list fl">电子书</li>
                    <li class="nav-list fl">原创文学</li>
                    <li class="nav-list fl">服装</li>
                    <li class="nav-list fl">户外运动</li>
                    <li class="nav-list fl">孕婴童</li>
                    <li class="nav-list fl">家居</li>
                    <li class="nav-list fl">创意文具</li>
                    <li class="nav-list fl">地方特色</li>
                    <li class="nav-list fl">海外购</li>
                    <li class="nav-list fl">电器城</li>
                </ul>
            </div>
            <!-- 左选项卡导航 右轮播图 -->
            <div class="menu clearfix">
                <!-- 左选项卡 -->
                <div class="nav-left fl">
                    <ul>
                       
                <!-- 内容优化掉 -->
                    </ul>
                </div>
                <!-- 右侧轮播图 -->
                <div class="banner fr">
                    <!--轮播开始-->
                    <div class="pptbox" id="bannerInner">
                        <!--轮播的内容-->
                        <ul class="innerwrapper">
                            <li>
                                <a href="#">
                                    <img src="images/banner1.jpg" />
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/banner2.jpg" />
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/banner3.jpg" />
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/banner4.jpg" />
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <img src="images/banner5.jpg" />
                                </a>
                            </li>
                        </ul>
                        <!--数字控制器-->
                        <ul class="controls">
                            <li class="current">1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                        </ul>
                        <!--按钮控制器-->
                        <span class="btnleft"></span>
                        <span class="btnright"></span>
                    </div>
                    <!--轮播结束-->
                    <script type="text/javascript">
                        //主轮播图
                        $("#bannerInner").tyslide({
                            boxh: 430,//盒子的高度
                            w: 1000,//盒子的宽度
                            h: 400,//图片的高度
                            isShow: true,//是否显示控制器
                            isShowBtn: true,//是否显示左右按钮
                            controltop: 3,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
                            controlsW: 24,//控制按钮宽度
                            controlsH: 24,//控制按钮高度
                            radius: 50,//控制按钮圆角度数
                            controlsColor: "#d8d8d8",//普通控制按钮的颜色
                            controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
                            isShowNum: true //是否显示数字
                        });
                    </script>

                </div>
            </div>
            <!-- 今日推荐-->
            <div class="recommed">
                <!-- 今日推荐标题栏 -->
                <div class="recommed-title">乐购 · 今日推荐</div>
                <!-- 今日推荐商品内容，大盒子 -->
                <div class="recommed-content clearfix">
                    <!-- 优化重复 方法一 -->
                    <script>
                        let html = `<div class="content-item fl">
                        <div class="img"></div>
                        <div class="icon"></div>
                        <p class="one">黑爵青蜂侠六键电竞游戏鼠标</p>
                        <p>全国联保 一年免费包换</p>
                        <div class="price">￥:299</div>
                        </div>`
                        for (let i = 0; i < 6; i++) {
                            document.write(html)
                        }
                    </script>

                    <script>
                            let html1=` <div class="content-item fl">
                        <div class="img1"></div>
                        <div class="icon"></div>
                        <p class="one">小熊家用静音加湿器</p>
                        <p>唯美外观 微米级喷雾</p>
                        <div class="price">￥:89</div>
                    </div>`
                            for(let i=0;i<6;i++){
                                document.write(html1)
                            }
                    </script>
                </div>
            </div>
            <!-- 电子书 -->
            <div class="ebook clearfix" id="ebook">
                <!-- 左侧好书 -->
                <div class="goodbook fl">
                    <!-- 标题 -->
                    <div class="book-titlebox clearfix">
                        <!-- 文字 -->
                        <div class="book-titlebo-text fl">图书 电子书</div>
                        <!-- 选项卡 -->
                        <div class="book-titlebo-choice fr clearfix">
                            <!-- 选项盒子 -->
                            <div class="book-choice  active fl">最新上架</div>
                            <div class="book-choice  fl">独家畅销</div>
                            <div class="book-choice  fl">电子书</div>
                        </div>
                    </div>
                    <!-- 选项内容父盒子 -->
                    <div class="book-contentoutbox">
                        <!-- 选项内容1 -->
                        <div class="book-contentbox show clearfix">
                            <!-- 左 -->
                            <div class="book-leftcontentbox clearfix">
                                <!-- 上图 -->
                                <div class="book-leftcontentbox-top"></div>
                                <!-- 下文字 -->
                                <div class="book-leftcontentbox-bottom">
                                    <ul class="clearfix">
                                        <li>中小学教辅</li>
                                        <li>外语</li>
                                        <li>考试</li>
                                        <li>小说</li>
                                        <li>文学 </li>
                                        <li>青春文学</li>
                                        <li>成功\励志</li>
                                        <li>管理</li>
                                        <li>历史</li>
                                        <li>哲学\宗教</li>
                                        <li>亲子\家教</li>
                                        <li>全部分类></li>

                                    </ul>
                                </div>
                            </div>
                            <!-- 右 -->
                            <div class="book-rightcontentbox">
                                <!-- 小轮播图 -->
                                <div class="book-banner fl">
                                    <!--轮播开始-->
                                    <div class="pptbox" id="bannerInner1">
                                        <!--轮播的内容-->
                                        <ul class="innerwrapper">
                                            <li>
                                                <a>
                                                    <img src="images/ppt2_05.jpg" />
                                                </a>
                                            </li>
                                            <li>
                                                <a>
                                                    <img src="images/banner2.jpg" />
                                                </a>
                                            </li>
                                            <li>
                                                <a>
                                                    <img src="images/banner3.jpg" />
                                                </a>
                                            </li>
                                            <li>
                                                <a>
                                                    <img src="images/banner4.jpg" />
                                                </a>
                                            </li>

                                        </ul>
                                        <!--数字控制器-->
                                        <ul class="controls">
                                            <li class="current">1</li>
                                            <li>2</li>
                                            <li>3</li>
                                            <li>4</li>
                                        </ul>
                                        <!--按钮控制器-->
                                        <span class="btnleft"></span>
                                        <span class="btnright"></span>
                                    </div>
                                    <!--轮播结束-->
                                    <script type="text/javascript">
                                        //主轮播图
                                        $("#bannerInner1").tyslide({
                                            boxh: 220,//盒子的高度
                                            w: 330,//盒子的宽度
                                            h: 220,//图片的高度
                                            isShow: true,//是否显示控制器
                                            isShowBtn: true,//是否显示左右按钮
                                            controltop: 3,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
                                            controlsW: 14,//控制按钮宽度
                                            controlsH: 2,//控制按钮高度
                                            radius: 0,//控制按钮圆角度数
                                            controlsColor: "#fff",//普通控制按钮的颜色
                                            controlsCurrentColor: "#7f7f7f",//当前控制按钮的颜色
                                            isShowNum: false //是否显示数字
                                        });
                                    </script>

                                </div>
                                <!-- 其他部分 -->
                                <!-- 优化掉 方法3 添加节点 -->

                            </div>
                        </div>
                        <!-- 选项内容2 -->
                        <div class="book-contentbox  clearfix">
                            <!-- 左 -->
                            <div class="book-leftcontentbox clearfix">
                                <!-- 上图 -->
                                <div class="book-leftcontentbox-top"></div>
                                <!-- 下文字 -->
                                <div class="book-leftcontentbox-bottom">
                                    <ul class="clearfix">
                                        <li>中小学教辅</li>
                                        <li>外语</li>
                                        <li>考试</li>
                                        <li>小说</li>
                                        <li>文学 </li>
                                        <li>青春文学</li>
                                        <li>成功\励志</li>
                                        <li>管理</li>
                                        <li>历史</li>
                                        <li>哲学\宗教</li>
                                        <li>亲子\家教</li>
                                        <li>全部分类></li>

                                    </ul>
                                </div>
                            </div>
                            <!-- 右 -->
                            <div class="book-rightcontentbox">
                                <!-- 小轮播图 -->
                                <div class="book-banner fl">
                                    <!--轮播开始-->
                                    <div class="pptbox" id="bannerInner2">
                                        <!--轮播的内容-->
                                        <ul class="innerwrapper">
                                            <li>
                                                <a>
                                                    <img src="images/ppt2_05.jpg" />
                                                </a>
                                            </li>
                                            <li>
                                                <a>
                                                    <img src="images/banner2.jpg" />
                                                </a>
                                            </li>
                                            <li>
                                                <a>
                                                    <img src="images/banner3.jpg" />
                                                </a>
                                            </li>
                                            <li>
                                                <a>
                                                    <img src="images/banner4.jpg" />
                                                </a>
                                            </li>

                                        </ul>
                                        <!--数字控制器-->
                                        <ul class="controls">
                                            <li class="current">1</li>
                                            <li>2</li>
                                            <li>3</li>
                                            <li>4</li>
                                        </ul>
                                        <!--按钮控制器-->
                                        <span class="btnleft"></span>
                                        <span class="btnright"></span>
                                    </div>
                                    <!--轮播结束-->
                                    <script type="text/javascript">
                                        //主轮播图
                                        $("#bannerInner2").tyslide({
                                            boxh: 220,//盒子的高度
                                            w: 330,//盒子的宽度
                                            h: 220,//图片的高度
                                            isShow: true,//是否显示控制器
                                            isShowBtn: true,//是否显示左右按钮
                                            controltop: 3,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
                                            controlsW: 14,//控制按钮宽度
                                            controlsH: 2,//控制按钮高度
                                            radius: 0,//控制按钮圆角度数
                                            controlsColor: "#fff",//普通控制按钮的颜色
                                            controlsCurrentColor: "#7f7f7f",//当前控制按钮的颜色
                                            isShowNum: false //是否显示数字
                                        });
                                    </script>

                                </div>
                                <!-- 其他部分 -->

                            </div>
                        </div>
                        <!-- 选项内容3 -->
                        <div class="book-contentbox  clearfix">
                            <!-- 左 -->
                            <div class="book-leftcontentbox clearfix">
                                <!-- 上图 -->
                                <div class="book-leftcontentbox-top"></div>
                                <!-- 下文字 -->
                                <div class="book-leftcontentbox-bottom">
                                    <ul class="clearfix">
                                        <li>中小学教辅</li>
                                        <li>外语</li>
                                        <li>考试</li>
                                        <li>小说</li>
                                        <li>文学 </li>
                                        <li>青春文学</li>
                                        <li>成功\励志</li>
                                        <li>管理</li>
                                        <li>历史</li>
                                        <li>哲学\宗教</li>
                                        <li>亲子\家教</li>
                                        <li>全部分类></li>

                                    </ul>
                                </div>
                            </div>
                            <!-- 右 -->
                            <div class="book-rightcontentbox">
                                <!-- 小轮播图 -->
                                <div class="book-banner fl">
                                    <!--轮播开始-->
                                    <div class="pptbox" id="bannerInner3">
                                        <!--轮播的内容-->
                                        <ul class="innerwrapper">
                                            <li>
                                                <a>
                                                    <img src="images/ppt2_05.jpg" />
                                                </a>
                                            </li>
                                            <li>
                                                <a>
                                                    <img src="images/banner2.jpg" />
                                                </a>
                                            </li>
                                            <li>
                                                <a>
                                                    <img src="images/banner3.jpg" />
                                                </a>
                                            </li>
                                            <li>
                                                <a>
                                                    <img src="images/banner4.jpg" />
                                                </a>
                                            </li>

                                        </ul>
                                        <!--数字控制器-->
                                        <ul class="controls">
                                            <li class="current">1</li>
                                            <li>2</li>
                                            <li>3</li>
                                            <li>4</li>
                                        </ul>
                                        <!--按钮控制器-->
                                        <span class="btnleft"></span>
                                        <span class="btnright"></span>
                                    </div>
                                    <!--轮播结束-->
                                    <script type="text/javascript">
                                        //主轮播图
                                        $("#bannerInner3").tyslide({
                                            boxh: 220,//盒子的高度
                                            w: 330,//盒子的宽度
                                            h: 220,//图片的高度
                                            isShow: true,//是否显示控制器
                                            isShowBtn: true,//是否显示左右按钮
                                            controltop: 3,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
                                            controlsW: 14,//控制按钮宽度
                                            controlsH: 2,//控制按钮高度
                                            radius: 0,//控制按钮圆角度数
                                            controlsColor: "#fff",//普通控制按钮的颜色
                                            controlsCurrentColor: "#7f7f7f",//当前控制按钮的颜色
                                            isShowNum: false //是否显示数字
                                        });
                                    </script>

                                </div>
                                <!-- 其他部分 -->

                            </div>
                        </div>
                    </div>

                </div>
                <!-- 右侧新书推荐 -->
                <div class="newbookbox fl">
                    <div class="newbook">
                        <!-- 标题 -->
                        <div class="newbook-title">新书畅销榜</div>
                        <ul></ul>
                    </div>
                </div>
            </div>
            <!-- 服装 -->
            <div class="clothing mat50" id="clothing">
                <!-- 标题 -->
                <div class="top-title clearfix">
                    <!-- 文字 -->
                    <div class="top-titlebox-text fl">服装</div>
                    <!-- 选项卡 -->
                    <div class="top-titlebo-choice fr clearfix">
                        <!-- 选项盒子 -->
                        <div class="top-choice  active fl">女装内衣</div>
                        <div class="top-choice  fl">热销男装</div>
                        <div class="top-choice  fl">精品鞋靴</div>
                    </div>

                </div>
                <!-- 中间内容 -->
                <div class="middle-content clearfix">
                    <div class="middle-left fl">
                        <div class="middle-left-top"></div>
                        <div class="middle-left-text">
                            <ul class="clearfix">
                                <li>01</li>
                                <li>02</li>
                                <li>03</li>
                                <li>04</li>
                                <li>05</li>
                                <li>06</li>
                                <li>07</li>
                                <li>08</li>
                                <li>09</li>
                                <li>10</li>
                                <li>11</li>
                                <li>12</li>
                            </ul>
                        </div>
                    </div>
                    <div class="middle-right fr clearfix">
                        <div class="middle-right-banner fl">
                            <!--轮播开始-->
                            <div class="pptbox" id="bannerInner-clothing">
                                <!--轮播的内容-->
                                <ul class="innerwrapper">
                                    <li>
                                        <a>
                                            <img src="./images/index10_05.jpg" />
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            <img src="images/banner2.jpg" />
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            <img src="images/banner3.jpg" />
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            <img src="images/banner4.jpg" />
                                        </a>
                                    </li>

                                </ul>
                                <!--数字控制器-->
                                <ul class="controls">
                                    <li class="current">1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                </ul>
                                <!--按钮控制器-->
                                <span class="btnleft"></span>
                                <span class="btnright"></span>
                            </div>
                            <!--轮播结束-->
                            <script type="text/javascript">
                                //主轮播图
                                $("#bannerInner-clothing").tyslide({
                                    boxh: 340,//盒子的高度
                                    w: 420,//盒子的宽度
                                    h: 340,//图片的高度
                                    isShow: true,//是否显示控制器
                                    isShowBtn: true,//是否显示左右按钮
                                    controltop: 4,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
                                    controlsW: 14,//控制按钮宽度
                                    controlsH: 2,//控制按钮高度
                                    radius: 0,//控制按钮圆角度数
                                    controlsColor: "#fff",//普通控制按钮的颜色
                                    controlsCurrentColor: "#7f7f7f",//当前控制按钮的颜色
                                    isShowNum: false //是否显示数字
                                });
                            </script>
                        </div>
                        <div class="middle-right-top3 fl"></div>
                        <div class="middle-right-top3 fl"></div>
                        <div class="middle-right-top3 fl"></div>
                        <div class="middle-right-bottom-adv fl"></div>
                        <div class="middle-right-bottom3 fl"></div>
                        <div class="middle-right-bottom3 fl"></div>
                        <div class="middle-right-bottom3 fl"></div>
                    </div>
                </div>
                <!-- 下方广告 -->
                <div class="bottom-adv">
                    <ul class="clearfix">
                        <!-- js获取背景图 -->
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                    </ul>
                </div>
            </div>
            <!-- 户外运动 -->
            <div class="sports mat50" id="sports">
                <!-- 标题 -->
                <div class="top-title-sports clearfix">
                    <!-- 文字 -->
                    <div class="top-titlebox-text fl">户外运动</div>
                    <!-- 选项卡 -->
                    <div class="top-titlebo-choice fr clearfix">
                        <!-- 选项盒子 -->
                        <div class="top-choice  active fl">国际名品</div>
                        <div class="top-choice  fl">户外装备</div>
                        <div class="top-choice  fl">运动潮流</div>
                    </div>

                </div>
                <!-- 中间内容 -->
                <div class="middle-content clearfix">
                    <div class="middle-left fl">
                        <div class="middle-left-top-sports"></div>
                        <div class="middle-left-text">
                            <ul class="clearfix">
                                <li>01</li>
                                <li>02</li>
                                <li>03</li>
                                <li>04</li>
                                <li>05</li>
                                <li>06</li>
                                <li>07</li>
                                <li>08</li>
                                <li>09</li>
                                <li>10</li>
                                <li>11</li>
                                <li>12</li>
                            </ul>
                        </div>
                    </div>
                    <div class="middle-right fr clearfix">
                        <div class="middle-right-banner fl">
                            <!--轮播开始-->
                            <div class="pptbox" id="bannerInner-sports">
                                <!--轮播的内容-->
                                <ul class="innerwrapper">
                                    <li>
                                        <a>
                                            <img src="./images/160801-12909pc-B1.jpg" />
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            <img src="images/banner2.jpg" />
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            <img src="images/banner3.jpg" />
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            <img src="images/banner4.jpg" />
                                        </a>
                                    </li>

                                </ul>
                                <!--数字控制器-->
                                <ul class="controls">
                                    <li class="current">1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                </ul>
                                <!--按钮控制器-->
                                <span class="btnleft"></span>
                                <span class="btnright"></span>
                            </div>
                            <!--轮播结束-->
                            <script type="text/javascript">
                                //主轮播图
                                $("#bannerInner-sports").tyslide({
                                    boxh: 340,//盒子的高度
                                    w: 420,//盒子的宽度
                                    h: 340,//图片的高度
                                    isShow: true,//是否显示控制器
                                    isShowBtn: true,//是否显示左右按钮
                                    controltop: 4,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
                                    controlsW: 14,//控制按钮宽度
                                    controlsH: 2,//控制按钮高度
                                    radius: 0,//控制按钮圆角度数
                                    controlsColor: "#fff",//普通控制按钮的颜色
                                    controlsCurrentColor: "#7f7f7f",//当前控制按钮的颜色
                                    isShowNum: false //是否显示数字
                                });
                            </script>
                        </div>
                        <div class="middle-right-top-sports fl"></div>
                        <div class="middle-right-top-sports fl"></div>
                        <div class="middle-right-top-sports fl"></div>
                        <div class="middle-right-bottom-adv fl"></div>
                        <div class="middle-right-bottom-sports fl"></div>
                        <div class="middle-right-bottom-sports fl"></div>
                        <div class="middle-right-bottom-sports fl"></div>
                    </div>
                </div>
                <!-- 下方广告 -->
                <div class="bottom-adv">
                    <ul class="clearfix">
                        <!-- js获取背景图 -->
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                    </ul>
                </div>
            </div>
            <!-- 童装 -->
            <div class="child-clothing mat50">
                <!-- 标题 -->
                <div class="top-title-sports clearfix">
                    <!-- 文字 -->
                    <div class="top-titlebox-text fl">童装 童鞋 婴儿装</div>
                    <!-- 选项卡 -->
                    <div class="top-titlebo-choice fr clearfix">
                        <!-- 选项盒子 -->
                        <div class="top-choice  active fl">儿童服装</div>
                        <div class="top-choice  fl">婴儿装</div>
                        <div class="top-choice  fl">小潮童鞋</div>
                    </div>
                </div>
                <!-- 中间内容 -->
                <div class="middle-content clearfix">
                    <div class="middle-left fl">
                        <div class="middle-left-top-child-clothing"></div>
                        <div class="middle-left-text">
                            <ul class="clearfix">
                                <li>01</li>
                                <li>02</li>
                                <li>03</li>
                                <li>04</li>
                                <li>05</li>
                                <li>06</li>
                                <li>07</li>
                                <li>08</li>
                                <li>09</li>
                                <li>10</li>
                                <li>11</li>
                                <li>12</li>
                            </ul>
                        </div>
                    </div>
                    <div class="middle-right fr clearfix">
                        <div class="middle-right-banner fl">
                            <!--轮播开始-->
                            <div class="pptbox" id="bannerInner-child-clothing">
                                <!--轮播的内容-->
                                <ul class="innerwrapper">
                                    <li>
                                        <a>
                                            <img src="./images/86030026281665_y.jpg" />
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            <img src="images/banner2.jpg" />
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            <img src="images/banner3.jpg" />
                                        </a>
                                    </li>
                                    <li>
                                        <a>
                                            <img src="images/banner4.jpg" />
                                        </a>
                                    </li>

                                </ul>
                                <!--数字控制器-->
                                <ul class="controls">
                                    <li class="current">1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                </ul>
                                <!--按钮控制器-->
                                <span class="btnleft"></span>
                                <span class="btnright"></span>
                            </div>
                            <!--轮播结束-->
                            <script type="text/javascript">
                                //主轮播图
                                $("#bannerInner-child-clothing").tyslide({
                                    boxh: 340,//盒子的高度
                                    w: 420,//盒子的宽度
                                    h: 340,//图片的高度
                                    isShow: true,//是否显示控制器
                                    isShowBtn: true,//是否显示左右按钮
                                    controltop: 4,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
                                    controlsW: 14,//控制按钮宽度
                                    controlsH: 2,//控制按钮高度
                                    radius: 0,//控制按钮圆角度数
                                    controlsColor: "#fff",//普通控制按钮的颜色
                                    controlsCurrentColor: "#7f7f7f",//当前控制按钮的颜色
                                    isShowNum: false //是否显示数字
                                });
                            </script>
                        </div>
                        <div class="middle-right-top-child-clothing fl"></div>
                        <div class="middle-right-top-child-clothing fl"></div>
                        <div class="middle-right-top-child-clothing fl"></div>
                        <div class="middle-right-bottom-adv fl"></div>
                        <div class="middle-right-bottom-child-clothing fl"></div>
                        <div class="middle-right-bottom-child-clothing fl"></div>
                        <div class="middle-right-bottom-child-clothing fl"></div>
                    </div>
                </div>
                <!-- 下方广告 -->
                <div class="bottom-adv">
                    <ul class="clearfix">
                        <!-- js获取背景图 -->
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                        <li class="bottom-adv-item"></li>
                    </ul>
                </div>
            </div>

            <!-- 家居日用 -->
            <div class="homeday mat50">
                <!-- 标题 -->
                <div class="top-title-sports clearfix">
                    <!-- 文字 -->
                    <div class="top-titlebox-text fl">家居日用</div>
                </div>
                <!-- 中间内容 -->
                <div class="middle-content clearfix">
                    <div class="middle-left-homeday fl">
                    </div>
                    <div class="middle-right-homeday fr clearfix">
                        <div class="middle-right-top-homeday fl"></div>
                        <div class="middle-right-top-homeday fl"></div>
                        <div class="middle-right-top-homeday fl"></div>
                        <div class="middle-right-top-homeday fl"></div>
                        <div class="middle-right-bottom-homeday fl"></div>
                        <div class="middle-right-bottom-homeday fl"></div>
                        <div class="middle-right-bottom-homeday fl"></div>
                        <div class="middle-right-bottom-homeday fl"></div>
                    </div>
                </div>
            </div>

            <!-- 推广 -->
            <div class="promotion mat50">
                <!-- 标题 -->
                <div class="top-title-sports clearfix">
                    <!-- 文字 -->
                    <div class="top-titlebox-text fl">推广商品</div>
                    <!-- 选项卡 -->
                    <div class="top-titlebo-choice-promotion fr clearfix">
                        <!-- 选项盒子 -->
                        <div class="top-choice-promotion  active fl"></div>
                        <div class="top-choice-promotion  fl"></div>
                    </div>
                </div>
                <!-- 中间内容 -->
                <div class="middle-content-promotion">
                    <div class="choice show">
                        <ul class="clearfix">
                            <!-- 优化掉 -->
                        </ul>
                    </div>
                    <div class="choice">
                        <ul class="clearfix">
                           <!-- 优化掉 -->
                        </ul>
                    </div>
                </div>



            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <div id="footer " class="mat50 footer">
        <!-- 发货流程 -->
        <div class="step ">
            <div class="imgbox clearfix">
                <div class="step-img fl"></div>
                <div class="step-img fl"></div>
                <div class="step-img fl"></div>
                <div class="step-img fl"></div>
            </div>
            <!-- go to top 图标  -->
            <div class="to-top"></div>

        </div>
        <!-- 底部导航 -->
        <div class="bottom-nav">
            <ul class="clearfix">
                <li>
                    <p>购物指南</p>
                    <ul>
                        <li>购物流程</li>
                        <li>发票制度</li>
                        <li>账户管理</li>
                        <li>会员优惠</li>
                    </ul>
                </li>
                <li>
                    <p>支付方式 </p>
                    <ul>
                        <li>货到付款</li>
                        <li>网上支付</li>
                        <li>礼品卡支付</li>
                        <li>银行转帐</li>
                    </ul>
                </li>
                <li>
                    <p>购物指南</p>
                    <ul>
                        <li>购物流程</li>
                        <li>发票制度</li>
                        <li>账户管理</li>
                        <li>会员优惠</li>
                    </ul>
                </li>
                <li>
                    <p>购物指南</p>
                    <ul>
                        <li>购物流程</li>
                        <li>发票制度</li>
                        <li>账户管理</li>
                        <li>会员优惠</li>
                    </ul>
                </li>
                <li>
                    <p>商家服务</p>
                    <ul>
                        <li>商家中心</li>
                        <li>运营服务</li>
                        <li>加入尾品汇</li>
                    </ul>

                </li>
            </ul>
        </div>
        <!-- 公司简介 -->
        <div class="bottom-bottom">
            <div class="bot-bot-top">
                公司简介 &emsp; | &emsp; Investor Relations &emsp; | &emsp; 网站联盟&emsp; | &emsp;乐购招商&emsp; | &emsp; 机构销售 &emsp; | &emsp;手机乐购&emsp;
                | &emsp; 官方Blog &emsp; | &emsp;热词搜索
            </div>
            <div class="bot-bot-bot">
                Copyright (C) 乐购网 2004-2016, All Rights Reserved
            </div>
        </div>
        <!-- 固定图标 -->
        <div class="fix-icon"></div>
    </div>




    <!-- 固定定位 -->
    <!-- 楼层跳转 -->
    <div class="jump">
        <ul>
            <li>
                <div class="jump-item"></div>
                <div class="jump-text">
                    <!-- // #+id 跳转至id 中心位置  -->
                    <a href="#ebook">图书</a>
                </div>
            </li>
            <li>
                <div class="jump-item"></div>
                <div class="jump-text">
                    <a href="#clothing">服装</a>
                </div>
            </li>
            <li>
                <div class="jump-item"></div>
                <div class="jump-text">
                    <a href="#sports">运动</a>
                </div>
            </li>
            <li>
                <div class="jump-item"></div>
                <div class="jump-text">
                    <a href="#">童装</a>
                </div>
            </li>
            <li>
                <div class="jump-item"></div>
                <div class="jump-text">
                    <a href="#">家居</a>
                </div>
            </li>
        </ul>
    </div>
    <!-- 领券中心 -->
    <div class="discont">
        <div class="box">
            <div class="top"></div>
            <div class="left"></div>
            <div class="bottom"></div>
        </div>

    </div>
    <!-- 固定搜索框 -->
    <div class="search-fixed">
        <!-- 搜索输入栏 -->
        <div class="sfbox">
            <!-- 输入框 -->
            <div class="s-ipt">
                <input type="text" placeholder="创意文具" id="newInp">
            </div>
            <!-- 搜索按钮 -->
            <div class="s-btn1"></div>
        </div>
    </div>
</body>

</html>